﻿// 改变element内置的样式

// 1.页码的样式
@import './self_element_pagination.scss';
// 2.弹窗部分(包括el-dialog, messageBox,以及消息通知的drawer)
@import './self_element_dialog.scss'; 
// 3.表格的样式
@import './self_element_table.scss';
// 4.表单的样式
@import './self_element_form.scss';
// 5.上传文件的控件样式
@import './self_element_upload.scss';
// 5、el-tree的样式
@import './self_element_tree.scss';
// 5、el-collapse的样式(包括下列菜单，el-row等样式)
@import './self_element_collapse.scss';
// 6、一些通用控件的样式
@import './self_element_ip4input.scss';

// 一些公用的修改element的样式

// 1.按钮下使用的是iconfont
.el-button .iconfont {
  margin-right: 3px;
  vertical-align: -1px;
}
// pageHeader页头的样式
.page_header {
  width: 100%;
  padding-left: 20px;
  background: $theme_main_color;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  .el-page-header__left {
    i,
    .el-page-header__title {
      cursor: pointer;
    }
  }
  .el-page-header__content {
    color: #fff;
  }
}
// 数据集管理页面的样式
.page_leftContent_set {
  position: relative;
  // 选择数据源的下拉框
  .set_sourceChange {
    width: 100%;
    height: 60px;
    background-color: #f4f6fb;
    p {
      font-size: 14px;
      height: 28px;
      line-height: 28px;
    }
    .el-select {
      height: 32px;
    }
  }
  // 上部的检索框
  .set_searchContent {
    position: absolute;
    left: 0;
    top: 130px;
    height: 32px;
    width: calc(100% - 20px);
    z-index: 100;
  }
  // 下部展示的列表
  .el-tabs {
    width: 100%;
    height: calc(100% - 60px);
    max-height: 640px;
    background-color: #f4f6fb;
    .el-tabs__header {
      margin-bottom: 0;
      height: 40px;
      overflow: hidden;
      .el-tabs__item {
        font-size: 16px;
      }
    }
    .el-tabs__content {
      width: 100%;
      height: calc(100% - 40px);
      padding-top: 40px;
      .el-tab-pane {
        width: 100%;
        height: 100%;
        .set_list {
          width: 100%;
          height: 100%;
          overflow: hidden;
          overflow-y: auto;
          &::-webkit-scrollbar{
            width: 8px;
            height: 4px;
          }
          &::-webkit-scrollbar-track{
            border-radius: 2px;
          }
          &::-webkit-scrollbar-thumb{
            border-radius: 8px;
          }
          li {
            width: 100%;
            height: 40px;
            padding: 0 5px;
            &:hover {
              background-color: #d9dff0;
              .list_addBtn {
                display: block;
              }
              .list_content {
                color: $theme_main_color;
              }
            }
            &.active {
              background-color: #d9dff0;
              .list_content {
                color: $theme_main_color;
              }
            }
            // 右侧的按钮
            .list_addBtn {
              float: right;
              width: 30px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              cursor: pointer;
              display: none;
              i {
                font-size: 30px;
              }
              &:hover {
                color: $theme_main_color;
              }
            }
            // 内容部分
            .list_content {
              height: 40px;
              line-height: 40px;
              margin-right: 32px;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              i {
                font-size: 20px;
                vertical-align: -3px;
              }
            }
          }
          li.set_noData {
            width: 100%;
            height: 100px;
            padding-top: 40px;
            line-height: 60px;
            text-align: center;
            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}
.page_rightContent_set {
  width: 100%;
  height: 100%;
  max-height: 740px;
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar{
    width: 6px;
    height: 8px;
  }
  &::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: $theme_main_color;
  }
}
.set_columnsList {
  width: 100%;
  li {
    float: left;
    margin-right: 20px;
  }
}